<template>
  <div>
    <!--设置用户角色对话框 -->
    <el-dialog title="设置用户角色" v-model="dialogVisible" :close-on-click-modal="false" @close="resetForm">
      <el-form :model="form" ref="settingsForm">
        <el-form-item label="角色" prop="roles" label-width="80px">
          <el-checkbox-group v-model="form.roles">
            <el-checkbox value="商品管理员">商品管理员</el-checkbox>
            <el-checkbox value="订单管理员">订单管理员</el-checkbox>
            <el-checkbox value="运营人员">运营人员</el-checkbox>
            <el-checkbox value="客户人员">客户人员</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
				<el-button type="primary" @click="submitForm">设置角色</el-button>
			</span>
    </el-dialog>
  </div>
</template>
<script setup>
import {ElMessage} from 'element-plus';
import {reactive, ref, toRefs} from 'vue';

const data = reactive({
  dialogVisible: false, // 控制对话框的显示状态
  //表单字段
  form: {
    roles: []
  },
});
const emit = defineEmits(['reset-roles']);
//创建教师表单组件实例
let settingsForm = ref(null);
let {
  dialogVisible,
  form,
} = toRefs(data);
//提交form表单
const submitForm = () => {
  if (form.value.roles.length == 0) {
    ElMessage({message: '请选择角色', type: 'warning',});
    return;
  }
  data.dialogVisible = false;
  emit('reset-roles', form.value.roles);
  ElMessage({message: '设置成功', type: 'success',});
};

//重置表单
const resetForm = () => {
  settingsForm.value.resetFields();
};
//暴露dialogVisible,父组件可以直接使用
defineExpose({
  dialogVisible,
  form
});
</script>


<style scoped>
/* 样式可以根据需要自定义 */
</style>